import { Component, Host, h, Prop, State, ComponentInterface } from '@stencil/core';

@Component({
  tag: 'ibz-skeleton',
  styleUrl: 'ibz-skeleton.scss',
})
export class IBzSkeleton implements ComponentInterface {
  el: HTMLDivElement;

  /**
   * 列数
   *
   * @type {number}
   * @memberof IBzSkeleton
   */
  @Prop()
  col: number = 1;

  @Prop()
  minHeight: number = 300;

  /**
   * 行高
   *
   * @type {number}
   * @memberof IBzSkeleton
   */
  @Prop()
  lineHeight: number = 40;

  /**
   * 是否显示头部
   *
   * @type {boolean}
   * @memberof IBzSkeleton
   */
  @Prop()
  showHeader: boolean = false;

  /**
   * 头部高度
   *
   * @type {number}
   * @memberof IBzSkeleton
   */
  @Prop()
  headerHeight: number = 40;

  /**
   * 头部宽度（百分比）
   *
   * @type {number}
   * @memberof IBzSkeleton
   */
  @Prop()
  headerPercentWidth: number = 35;

  /**
   * 是否显示尾部
   *
   * @type {boolean}
   * @memberof IBzSkeleton
   */
  @Prop()
  showFooter: boolean = false;

  /**
   * 尾部高度
   *
   * @type {number}
   * @memberof IBzSkeleton
   */
  @Prop()
  footerHeight: number = 40;

  /**
   * 尾部宽度（百分比）
   *
   * @type {number}
   * @memberof IBzSkeleton
   */
  @Prop()
  footerPercentWidth: number = 75;

  /**
   * 内容列表
   *
   * @type {any[]}
   * @memberof IBzSkeleton
   */
  @State()
  contentList: any[] = [];

  /**
   * 定时器对象
   *
   * @type {*}
   * @memberof IBzSkeleton
   */
  timer: any;

  /**
   * 计算行
   *
   * @memberof IBzSkeleton
   */
  calcLine(): number {
    // 计算容器高度 = 容器高度
    if (!this.el) {
      return;
    }
    let calcElHeight: number = this.el.clientHeight;
    if (!calcElHeight || calcElHeight < this.minHeight) {
      calcElHeight = this.minHeight;
    }
    if (this.showHeader) {
      calcElHeight = calcElHeight - (this.headerHeight + 10);
    }
    if (this.showFooter) {
      calcElHeight = calcElHeight - (this.footerHeight + 10);
    }
    if (this.col > 1) {
      calcElHeight = calcElHeight * this.col;
    }
    // 计算行高 = 行高+上边距 10
    const calclLineHeight = this.lineHeight + 10;
    const length = Math.ceil(calcElHeight / calclLineHeight) - 1;
    if (length % this.col > 0) {
      return length - (length % this.col);
    }
    return length;
  }

  connectedCallback() {
    this.timer = setTimeout(() => {
      this.calcContent();
    }, 100);
  }

  disconnectedCallback() {
    if (this.timer) {
      clearTimeout(this.timer);
    }
  }

  /**
   * 计算内容区
   *
   * @memberof IBzSkeleton
   */
  calcContent() {
    const line: number = this.calcLine();
    const contentList: any[] = [];
    for (let i = 0; i < line; i++) {
      contentList.push(this.generateRow());
    }
    this.contentList = contentList;
  }

  /**
   * 生成行dom
   *
   * @param {number} num
   * @memberof IBzSkeleton
   */
  generateRow() {
    return (
      <div class='skeleton-loader-container' style={{ height: this.lineHeight + 'px', width: 100 / this.col + '%' }}>
        <div class='skeleton-loader_bone'></div>
      </div>
    );
  }

  render() {
    return (
      <Host>
        <div
          ref={(ref: any) => {
            this.el = ref;
          }}
          class='ibz-skeleton'
          style={{ minHeight: this.minHeight + 'px' }}
        >
          {this.showHeader ? (
            <div class='skeleton-loader-header' style={{ height: this.headerHeight + 'px' }}>
              <div class='skeleton-loader_bone' style={{ width: this.headerPercentWidth + '%' }}></div>
            </div>
          ) : null}
          {this.contentList.map((item: any) => {
            return item;
          })}
          {this.showFooter ? (
            <div class='skeleton-loader-footer' style={{ height: this.footerHeight + 'px' }}>
              <div class='skeleton-loader_bone' style={{ width: this.footerPercentWidth + '%' }}></div>
            </div>
          ) : null}
        </div>
      </Host>
    );
  }
}
